@use "@/common/styles/colors"

.server-tabs
  display: flex
  padding: 0.7rem 1rem 0 1rem
  gap: 1rem
  align-items: center
  user-select: none
  overflow: visible
  position: relative

  svg
    width: 2rem
    height: 2rem

  .layout-controls
    display: flex
    gap: 0.3rem
    align-items: center
    margin-right: 1rem
    padding-right: 1rem
    border-right: 1px solid colors.$gray

    .layout-btn
      cursor: pointer
      padding: 0.5rem
      border-radius: 4px
      transition: all 0.2s ease
      color: colors.$subtext
      width: 1.8rem
      height: 1.8rem

      &:hover
        background-color: colors.$gray
        color: colors.$white

      &.active
        background-color: colors.$primary
        color: colors.$white

  .tabs-container
    position: relative
    flex: 1
    display: flex
    align-items: center
    overflow: hidden

    .scroll-indicator
      position: absolute
      top: 0
      bottom: 0
      width: 3rem
      display: flex
      align-items: center
      justify-content: center
      cursor: pointer
      z-index: 10
      transition: all 0.2s ease
      pointer-events: all

      &.left
        left: 0
        background: linear-gradient(to right, colors.$background 50%, transparent)

      &.right
        right: 0
        background: linear-gradient(to left, colors.$background 50%, transparent)

      svg
        width: 2rem
        height: 2rem
        color: colors.$subtext
        transition: all 0.2s ease
        padding: 0.5rem
        border-radius: 4px

      &:hover svg
        background-color: colors.$gray
        color: colors.$white

  .tabs
    display: flex
    gap: 0.5rem
    flex: 1
    overflow-x: auto
    overflow-y: hidden
    scrollbar-width: none

    &::-webkit-scrollbar
      display: none

    .server-tab
      display: flex
      gap: 0.5rem
      padding: 0.5rem 1rem
      align-items: center
      border-radius: 0.5rem 0.5rem 0 0
      border-bottom: 2px solid transparent
      cursor: grab
      overflow: hidden
      white-space: nowrap
      flex-shrink: 0
      transition: all 0.2s ease

      &:hover
        background-color: colors.$gray
        border-bottom: 2px solid colors.$primary-opacity

      &.dragging
        cursor: grabbing
        transform: rotate(2deg)
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)

      &.drop-target
        border-left: 3px solid colors.$primary
        background-color: colors.$primary-opacity

      svg
        width: 1.2rem
        height: 1.2rem
        flex-shrink: 0

      .progress-circle
        position: relative
        width: 36px
        height: 36px
        flex-shrink: 0
        display: flex
        align-items: center
        justify-content: center

        &.no-progress
          .progress-icon
            width: 1.5rem
            height: 1.5rem

        svg
          width: 36px
          height: 36px
          position: absolute
          top: 0
          left: 0

          .progress-bg
            opacity: 0.15
            color: colors.$subtext

          .progress-bar
            color: colors.$success
            transition: stroke-dashoffset 0.1s linear

        .progress-icon
          width: 1rem
          height: 1rem
          position: relative
          z-index: 1
          transition: all 0.2s ease

      h2
        margin: 0
        font-size: 1.3rem
        flex: 1

      .tab-actions
        display: flex
        align-items: center
        gap: 0.25rem
        cursor: pointer

        .close-btn
          opacity: 0.6
          transition: all 0.2s ease
          padding: 0.25rem
          border-radius: 0.25rem

          &:hover
            opacity: 1
            background-color: colors.$error-opacity

    .server-tab-active
      background-color: colors.$gray
      border-bottom: 2px solid colors.$primary

      &:hover
        background-color: colors.$gray
        border-bottom: 2px solid colors.$primary